<template>
	<view class="container">
		<view class="status_bar">
			<!-- 状态栏区域 -->
		</view>
		<view class="content">
			<view class="navigate-head">
				<view class="">个人中心</view>
				<image @click="showDraw=!showDraw" src="../../static/images/user-icon-drawer.png" mode=""></image>
			</view>
			
			<view class="card-area">
				<view class="avatar-area">
					<image :src="userAvatar" mode=""></image>
					<view class="info">
						<view class="fz17">{{userName}}</view>
						<view class="fz17 grey-blue-F">ID账号：{{userAccount}}</view>
					</view>
					<view class="run-icon"></view>
				</view>
				<view class="card-num">
					<view class="balance">{{'500.3796200 '+'USDT'}}</view>
					<view class="conversion">≈ $0.02USDT</view>
				</view>
				<view class="card-bottom">
					<view class="card-bottom-btn" @click="userFunc('recharge')"><image class="left" src="../../static/images/user-icon-cz.png" mode=""></image><text>充值</text></view>
					<view class="card-bottom-btn" @click="userFunc('withdrawal')"><image class="right" src="../../static/images/user-icon-tx.png" mode=""></image><text>提现</text></view>
				</view>
			</view>
			<view class="list-area">
				<view class="list-item" @click="userFunc('team')">
					<image class="list-icon icon1" src="../../static/images/user-icon-zdyj.png" mode=""></image>
					<view class="item-text">{{i18n.user.zdyj}}</view>
					<!-- <image class="enter-icon" src="../../static/images/enter-btn.png" mode=""></image> -->
				</view>
				<view class="list-item" @click="userFunc('detail')">
					<image class="list-icon icon2" src="../../static/images/user-icon-jymx.png" mode=""></image>
					<view class="item-text">交易明细</view>
					<!-- <image class="enter-icon" src="../../static/images/enter-btn.png" mode=""></image> -->
				</view>
				<view class="list-item" @click="userFunc('withdrawal-record')">
					<image class="list-icon icon3" src="../../static/images/user-icon-txjl.png" mode=""></image>
					<view class="item-text">提现记录</view>
					<!-- <image class="enter-icon" src="../../static/images/enter-btn.png" mode=""></image> -->
				</view>
				<view class="list-item" @click="userFunc('recharge-record')">
					<image class="list-icon icon4" src="../../static/images/user-icon-czjl.png" mode=""></image>
					<view class="item-text">充值记录</view>
					<!-- <image class="enter-icon" src="../../static/images/enter-btn.png" mode=""></image> -->
				</view>
				<view class="list-item" @click="userFunc('contacts')">
					<image class="list-icon icon5" src="../../static/images/user-icon-lxkf.png" mode=""></image>
					<view class="item-text">联系客服</view>
					<!-- <image class="enter-icon" src="../../static/images/enter-btn.png" mode=""></image> -->
				</view>
				<view class="list-item" @click="userFunc('account-info')">
					<image class="list-icon icon6" src="../../static/images/user-icon-zhxx.png" mode=""></image>
					<view class="item-text">账户信息</view>
					<!-- <image class="enter-icon" src="../../static/images/enter-btn.png" mode=""></image> -->
				</view>
			</view>
			<view class="drawer-wrapper" :class="{'showDraw':showDraw, 'hideDraw': !showDraw}">
				<view class="drawer-box">
					<view class="search-box">
						<image src="../../static/images/user-icon-search.png" mode=""></image>
						<input type="text" value="" placeholder="搜索币种" />
					</view>
					<view class="currency-item" :class="{'active': index==currencyIndex}" v-for="(item,index) in drawList" :key="index" @click="currencyIndex=index">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<!-- <tabbar-diy :isIndex="4"></tabbar-diy> -->
	</view>
</template>

<script>
	let _self;
	import {
		switchDarkT,
		switchBrightT,
		checkPattern,
		switchLang
	} from '../../common/lang-pattern.js'
	import tabbarDiy from '../../components/tabbar-diy.vue'
	
	export default {
		data() {
			return {
				isIndex: 4,
				userAvatar: '../../static/images/avatar.png',
				userName: 'Ast安和酱',
				userAccount: '888888',
				balanceType: 'USD',
				balance: '500.37962 00',
				showDraw: false,
				drawList: ['USDT', 'BTC', 'ETH', '自选'],
				currencyIndex: 0,
			}
		},
		computed:{
			i18n() {
				return this.$t('message');
			},
		},
		components: {
			tabbarDiy
		},
		onShow() {
			switchLang(uni, this, this.i18n.user, true);
		},
		onLoad() {
			_self = this;
			switchLang(uni, this, this.i18n.user, true);
		},
		methods: {
			userFunc(i){
				switch (i){
					case 'recharge':
						uni.navigateTo({
							url: '/pages/user/recharge/recharge'
						})
						break;
					case 'withdrawal':
						uni.navigateTo({
							url: '/pages/user/withdrawal/withdrawal'
						})
						break;
					case 'team':
						uni.navigateTo({
							url: '/pages/team/team-commission?previous=4'
						})
						break;
					case 'detail':
						uni.navigateTo({
							url: '/pages/user/transaction-details/transaction-details'
						})
						break;
					case 'withdrawal-record':
						uni.navigateTo({
							url: '/pages/user/withdrawal-record/withdrawal-record'
						})
						break;
					case 'recharge-record':
						uni.navigateTo({
							url: '/pages/user/recharge-record/recharge-record'
						})
						break;
					case 'contacts':
						uni.navigateTo({
							url: '/pages/user/customer-service/customer-service'
						})
						break;
					case 'account-info':
						uni.navigateTo({
							url: '/pages/user/account-info/account-info'
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		min-height: 100vh;
		background-color: #071724;
	}
	.content{
		color: #FFFFFF;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.navigate-head{
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		font-size: 29rpx;
		
		image{
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			left: 33rpx;
		}
	}
	
	.card-area{
		margin: 0 auto;
		width: 685rpx;
		height: 321rpx;
		box-sizing: border-box;
		padding-top: 26rpx;
		color: #FFFFFF;
		background: url('../../static/images/user-card-bg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		
		.avatar-area {
			height: 60rpx;
			padding-left: 39rpx;
			display: flex;
			justify-content: space-between;
			align-content: center;
			
			image{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 13rpx;
			}
			.info{
				flex: 1;
			}
			.run-icon{
				// width: 38rpx;
				// height: 39rpx;
				// background: url(../../static/images/run-icon.png) no-repeat;
				width: 100rpx;
				height: 100rpx;
				background: url(../../static/images/run-icon-new.gif) no-repeat;
				background-size: 100% 100%;
				margin-right: 49rpx;
				margin-top: -20rpx;
			}
		}
		.card-num{
			text-align: center;
			font-size: 24rpx;
			margin: 37rpx auto 50rpx;
			
			.balance{
				font-family: 'fzyt_GBK';//字体在App.vue文件中引入
				font-weight: bold;
				font-size: 42rpx;
				background: linear-gradient(to bottom, #01E7CF 0%, #458EFF 70%);
				background-clip: text;
				color: transparent;
			}
			.conversion{
				transform: scale(0.92);
				color: #7592B4;
			}
		}
		.card-bottom{
			width: 100%;
			height: 71rpx;
			background-color: rgba($color: #fff, $alpha: 0.5);
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			bottom: 0;
			border-top-left-radius: 0rpx;
			border-top-right-radius: 0rpx;
			border-bottom-left-radius: 28rpx;
			border-bottom-right-radius: 28rpx;
		}
		.card-bottom-btn{
			width: 50%;
			height: 71rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			
			.left{
				width: 35rpx;
				height: 31rpx;
				margin-right: 13rpx;
			}
			.right{
				width: 35rpx;
				height: 33rpx;
				margin-right: 13rpx;
			}
		}
	}
	.list-area{
		margin: 42rpx auto 0;
		width: 685rpx;
		font-size: 25rpx;
		
		.list-item{
			width: 685rpx;
			height: 74rpx;
			border-radius: 8rpx;
			background-color: #151F2A;
			// box-shadow: 0px 2rpx 5rpx #000;
			margin: 0 auto 21rpx;
			display: flex;
			align-items: center;
		}
		.list-icon{
			
			&.icon1, &.icon2, &.icon4{
				width: 33rpx;
				height: 33rpx;
				margin-left: 27rpx;
				margin-right: 29rpx;
			}
			&.icon3{
				width: 36rpx;
				height: 28rpx;
				margin-left: 26rpx;
				margin-right: 27rpx;
			}
			&.icon5{
				width: 33rpx;
				height: 34rpx;
				margin-left: 27rpx;
				margin-right: 28rpx;
			}
			&.icon6{
				width: 29rpx;
				height: 33rpx;
				margin-left: 29rpx;
				margin-right: 31rpx;
			}
		}
		.item-text{
			// margin-right: 429rpx;
		}
		.enter-icon{
			width: 9rpx;
			height: 16rpx;
		}
	}
	.drawer-wrapper{
		width: 247rpx;
		background-color: #071724;
		// background-color: #f00;
		position: fixed;
		top: calc(90rpx + var(--status-bar-height));//加上状态栏高度
		left: 33rpx;
		box-shadow: 0px 0px 6rpx rgba($color: #fff, $alpha: 0.1);
		
		&.showDraw{
			transform: scale(1);
			transform-origin: 0% 0;
			transition: all 0.2s ease-in;
			opacity: 1;
			transition: all 0.2s;
		}
		&.hideDraw{
			transform: scale(0);
			transform-origin: 0% 0;
			transition: all 0.2s ease-in;
			opacity: 0;
			transition: all 0.2s;
		}
		
		.drawer-box {
			display: flex;
			flex-direction: column;
			font-size: 25rpx;
			color: #fff;
			padding: 0 17rpx;
			box-sizing: border-box;
		}
		.search-box{
			width: 213rpx;
			height: 52rpx;
			margin: 30rpx auto 60rpx;
			background-color: #202A33;
			display: flex;
			align-items: center;
			
			image{
				width: 22rpx;
				height: 22rpx;
				margin-left: 28rpx;
			}
			
			input{
				font-size: 24rpx;
				transform: scale(0.75);
				transform-origin: 0% 50%;
				padding-left: 12rpx;
				flex: 1;
			}
		}
		.currency-item{
			height: 25rpx;
			line-height: 25rpx;
			padding-left: 26rpx;
			margin-bottom: 69rpx;
			border-left: 6rpx solid transparent;
			
			&.active{
				border-left: 6rpx solid #13D5BC;
			}
		}
	}
</style>
